CSS Grid terminologie

Rasterlijnen (grid lines)

Rasterlijnen vormen het raster en kunnen horizontaal of verticaal zijn. Je kan er naar verwijzen met een nummer, zoals ik tot nu toe heb gedaan, maar ze kunnen ook worden genoemd.

Rasterspoor (grid track)

Een rasterspoor is de ruimte tussen twee rasterlijnen. Die kan horizontaal of verticaal zijn.
In de voorbeelden in Een grid definieren hebben we twee soorten rastersporen gemaakt:

1. grid tracks die inhoudscellen representeren;
2. rastersporen die goten representeren;

Puur technisch gezien maakt dat voor de grid niets uit. Gootlijnen en kolomlijnen zijn identiek. Je moet alleen rekening houden met de gootlijnen wanneer je de kolommen en rijnen nummert waarin je inhoud wilt plaatsen. Hou met de gootlijnen rekening bij het uitzoeken waar inhoud begint en eindigt.

Rastergoten (grid gutters)

De voorbeelden in Een grid definieren maken goten met een rasterspoor (grid track) dat gebruikt wordt als een goot tussen tracks die voor inhoud worden gebruikt. Dit is een goede werkwijze en is overigens noodzakelijk als je een complex raster wilt maken met verschillende gootbreedtes.

Recent echter werd de eigenschap van grid-column-gap en grid-row-gap toegevoegd aan de niveau 1 specificatie.

Als de witruimte tussen de kolommen gelijk is, hoef je dus geen extra kolommen te maken en die gebruiken als goten. Hetzelfde geldt voor de witruimte tussen rijen. We kunnen onze CSS Een grid definieren uit herschrijven:

.showroom {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-column-gap: 15px;
  grid-template-rows: auto auto auto auto;
  grid-row-gap: 15px;
}

We moeten natuurlijk ook de nummering voor het plaatsen van de kolommen wijzigen vemits we nu geen gootkolommen meer hebben. Het voordeel is dat we nu alleen de 'echte' kolommen moeten tellen, de kolommen met inhoud:

.t1 {
  grid-area: 1/1/2/3;
}
.t2 {
  grid-area: 1/3/2/4;
}
.t3 {
  grid-area: 2/1/2/2;
}
.t4 {
  grid-area: 2/2/3/4;
}
.t5 {
  grid-area: 3/1/4/4;
}

Met hetzelfde resultaat:

En als de witruimte tussen kolommen en rijen hetzelfde zijn kunnen we het korter schrijven door gebruik te maken van de grid-gap eigenschap:

.showroom {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: auto auto auto auto;
  grid-gap: 15px;
}

Rastercel (grid cell)

Een rastercel is de ruimte tussen vier rasterlijnen. Het is de kleinst mogelijke eenheid op het raster. Je kan het best vergelijken met een tabelcel.

Rastergebied (grid area)